<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>添加收货人地址信息</title>
		<base target="_blank" />

		<!--可无视-->
		<link href="http://hovertree.com/texiao/bootstrap/4/css/main.css" rel="stylesheet" type="text/css" />

		<!--必要样式-->
		<link href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="http://hovertree.com/texiao/bootstrap/4/css/city-picker.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			.address1 {
				height: 50px;
				margin-top: 30px;
			}
			
			#add1 {
				height: 30px;
			}
			.name1{
				margin-bottom: 15px;
			}
			.phone{
				margin-bottom: 15px;
			}
		</style>
	</head>

	<body>

		<form class="form-horizontal" action="AddressAction" method="post" id="form1" >

			<h2 class="page-header">添加收货人信息</h2>
            <div class="name1">
            	<font>收货人姓名</font>
            	<input type="text" name="addname" id="addname" placeholder="请输入收货人姓名" />
            </div>
            <div class="phone">
            	<font>收货人联系电话</font>
            	<input type="text" name="addtel" id="addtel" placeholder="请输入联系电话" />
            </div>
				
					<div id="distpicker">
						<div class="form-group">
							<div style="position: relative;">
								<input name="addadress1" id="city-picker3" class="form-control" readonly type="text" value="天津市/天津市/西青区" data-toggle="city-picker">
							</div>
						</div>
						<div class="address1">
							<input type="text" name="addadress2" id="address" value="" />
						</div>

						<div class="form-group">
							<button class="btn btn-warning" id="reset" type="reset">重置</button>
							<button class="btn btn-danger" id="destroy" type="submit">确定</button>
						</div>
					</div>
				</form>


			<script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>
			<script src="http://hovertree.com/ziyuan/bootstrap/3.3.6/js/bootstrap.min.js"></script>
			<script src="http://hovertree.com/texiao/bootstrap/4/js/city-picker.data.js"></script>
			<script src="http://hovertree.com/texiao/bootstrap/4/js/city-picker.js"></script>
			<script src="http://hovertree.com/texiao/bootstrap/4/js/main.js"></script>

	</body>
<script type="text/javascript">
	// 使用jquery进行ajax处理
	function doAjaxQuery() {
		// 使用jquery进行ajax请求处理
		$.ajax({
			type : "POST", // 请求类型
			url : "AddressAction", // 请求的url
			data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作
				
				// 解析json数据
				console.info(data);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
				 // 解析拼写的html内容
				$.each(data, function(index, eachVal) {
					
					
				});
			},
			error : function(data) {
				alert("请求失败" + data);
			}
		});
	}
</script>

</html>